<template>
	<view class="login_box">
		<image class="Max" src="../../static/app.png" mode=""></image>
		<view class="login_img">
			<text>Hi,</text>
			<text>欢迎进入风动社区</text>
		</view>
		<view class="input_box">
			<input type="number" placeholder="请输入手机号码" placeholder-style="color:#bebfc3" v-model="phone">
			<input type="password" placeholder="请输入密码" placeholder-style="color:#bebfc3" v-model="Login_pwd"
				v-if="state">
			<view class="yzm_box" v-else>
				<input type="safe-password" placeholder="请输入手机验证码" placeholder-style="color:#bebfc3" v-model="code">
				<text @click="_getCodes()">{{codetext}}</text>
			</view>
		</view>
		<!-- 验证码登录 -->
		<view class="login_button" @click="empty" v-if="state">登录</view>
		<!-- 密码登录 -->
		<view class="login_button" @click="empty" v-else>登录</view>
		<text class="login_switch" @click="change()">{{btntext}}</text>
	</view>
</template>

<script>
	var util = require('@/util/request5.js');
	export default {
		data() {
			return {
				state: true, //登录选择切换
				btntext: '验证码登录', //登录选择
				codetext: '获取验证码',
				isDisabled: true,
				version: '5.0',
				phone: '',
				code: '',
				Login_pwd: ''
			}
		},
		onLoad(e) {
			// if (!e.lg) {
			// 	if (e.code) {
			// 		this.getWxOpenId(e.code)
			// 	} else {
			// 		this.getWxConfigInfo(e.code)
			// 	}
			// }
		},
		methods: {
			versionChange() {
				this.show = true
			},
			change() {
				this.state = !this.state
				if (this.state) {
					this.btntext = '验证码登录'
				} else {
					this.btntext = '密码登录'
				}
			},
			//判断是否为空
			empty() {
				if (this.state) {
					if (this.Login_pwd != '' && this.phone != '') {
						this._loginpwd5()
					} else {
						uni.showToast({
							title: '请输入手机号和密码',
							icon: "none"
						});
					}
				} else {
					if (this.code != '' && this.phone != '') {
						this._logincode5()
					} else {
						uni.showToast({
							title: '请输入手机号和验证码',
							icon: "none"
						});
					}
				}
			},
			_getCodes() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				let that = this;
				// 防止多次重复点击
				if (!that.isDisabled) {
					return false;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.phone))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.V_Code5()
			},
			getCode() {
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				this.setTimer();
			},
			setTimer() {
				if (this.version == '1.0') {
					this.V_Code()
				} else if (this.version == '5.0') {
					this.V_Code5()
				} else if (this.version == '3.0') {
					this.V_Code3()
				}
			},
			async V_Code5() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/sendSms',
					data: {
						mobile: this.phone
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					icon: "none"
				});
				if (res.code == 1) {
					let holdTime = 60; //定义变量并赋值
					this.codetext = "重新获取(60)"
					//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
					//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
					this.Timer = setInterval(() => {
						if (holdTime <= 0) {
							this.isDisabled = true;
							this.getCodeBtnColor = "#ffffff";
							this.codetext = "获取验证码"
							clearInterval(this.Timer); //清除该函数
							return; //返回前面
						}
						this.codetext = "重新获取(" + holdTime + ")"
						holdTime--;
					}, 1000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					return false;
				}
			},
			async _loginpwd5() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'user/login',
					data: {
						account: this.phone,
						password: this.Login_pwd
					}
				});
				uni.hideLoading()
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				} else {
					uni.setStorageSync('userinfo', res.data.userinfo);
					uni.setStorageSync('version', this.version);
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			async _logincode5() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'user/mobilelogin',
					data: {
						mobile: this.phone,
						captcha: this.code
					}
				});
				uni.hideLoading()
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				} else {
					uni.setStorageSync('userinfo', res.data.userinfo);
					uni.setStorageSync('version', this.version);
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			// 获取微信公众号信息
			async getWxConfigInfo() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Wechats/getWxConfigInfo'
				});
				if (res.code == 1) {
					uni.setStorageSync('wxInfo', res.data);
					this.getCodes('')
				}
			},
			// 获取微信OPENID
			async getWxOpenId(code) {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Wechats/getWxOpenId',
					data: {
						code: code
					}
				});
				if (res.code == 1) {
					if (res.data != null && res.data != '' && res.data != undefined) {
						uni.setStorageSync('openid', res.data);
					}
				}
			},
			// 获取CODE
			getCodes(code) {
				if (code == '' || code == undefined) {
					this.wxInfo = uni.getStorageSync('wxInfo');
					const redirect_url = util.WEB_URL + '/pages/login/login';
					const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.wxInfo.AppID +
						'&redirect_uri=' + encodeURIComponent(redirect_url) +
						'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
					window.location.href = url
				} else {
					this.getWxOpenId(code)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login_box {
		min-height: 100vh;
		padding: 150rpx 70rpx 70rpx 70rpx;
		box-sizing: border-box;
		// background-image: linear-gradient(#fff, #e7f6f4);

		.login_img {
			width: 360rpx;
			height: 119rpx;
			margin-top: 50rpx;
			margin-bottom: 160rpx;
			float: left;

			text {
				display: block;
				width: 100%;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 56rpx;
			}
		}

		.Max {
			width: 119rpx;
			height: 119rpx;
			margin-top: 50rpx;
			margin-bottom: 160rpx;
			margin-right: 20rpx;
			margin-left: 44rpx;
			float: left;
			border-radius: 18rpx;
		}

		.input_box {
			background-color: #fff;
			border-radius: 15rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			input {
				width: 90%;
				padding: 15rpx;
				height: 100rpx;
				box-sizing: border-box;
			}

			input:not(:last-child) {
				border-bottom: #dddddf solid 1px;
			}

			.yzm_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 90%;

				input {
					width: 70%;
					border-bottom: none;
				}

				text {
					color: #999999;
					font-size: 24rpx;
					display: block;
					margin-right: 15rpx;
				}
			}
		}

		.login_button {
			background-color: #018afe;
			width: 100%;
			border-radius: 15rpx;
			font-size: 28rpx;
			padding: 30rpx;
			box-sizing: border-box;
			color: #fff;
			text-align: center;
			margin-top: 60rpx;
			transition: all 0.5s;
		}

		.login_button:active {
			opacity: 0.8;
		}

		.login_switch {
			display: block;
			margin-top: 38rpx;
			width: 100%;
			text-align: center;
			color: #9ea2aa;
			font-size: 24rpx;
		}
	}
</style>